<template>
  <div style="display: inline-block">
    <el-tag
      class="mx-1"
      closable
      v-if="!item.isEdit"
      :disable-transitions="false"
      @click="handleEdit(item)"
      @close.stop="handleClose(item)"
    >
      {{ item.name }}
    </el-tag>
    <el-input
      v-else
      v-model="item.editValue"
      class="ml-1 w-20"
      size="middle"
      style="width: auto"
      @keyup.enter="handleEditInputConfirm(item)"
      @blur="handleEditInputConfirm(item)"
    />
  </div>
</template>
<script setup>
import { ref, reactive, nextTick, watch, defineEmits } from "vue";

const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => {},
  },
});
const item = props.item;
watch(
  () => props.item,
  (newV) => {
    console.log(newV);
  },
  { immediate: true, deep: true }
);

const inputVisible = ref(false);
const InputRef = ref();
const editInputRef = ref();
const emits = defineEmits(["closeTagItem", "editTagItem"]);
const handleClose = (tag) => {
  emits("closeTagItem", tag);
  //   dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};

const handleEdit = (item) => {
  item.isEdit = true;
};
const handleEditInputConfirm = (item) => {
  emits("editTagItem", item);
  // item.name = item.editValue;
  item.isEdit = false;
};
</script>
<style lang="scss" scoped>
.el-form {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  :deep .el-form-item {
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 0px;
    &:last-child {
      border-bottom: none;
    }
    .el-form-item__label {
      border-right: 1px solid #e4e7ed;
      padding: 20px;
      display: flex;
      height: auto;
      align-items: center;
    }
    .el-form-item__content {
      padding: 20px;
      padding-bottom: 5px;
      > * {
        padding: 0 20px;
      }
      .el-form-item__error {
        top: 42px;
      }
      .el-tag {
        margin-left: 15px;
        margin-bottom: 15px;
        vertical-align: middle;
      }
      .button-new-tag {
        margin-left: 15px;
        margin-bottom: 15px;
      }
      .el-input {
        width: auto;
        display: inline-block;
        margin-left: 15px;
        margin-bottom: 15px;
      }
    }
    .el-input__inner {
      margin-bottom: 0px;
    }
  }
}
.form-wrap {
  padding: 20px;
}
</style>
